<template>
	<view class="commonProblem">
		<view class="listBox" v-for="(item, index) in listData">
			<view class="listItem" @click="clickItem(index)">
				<view class="itemJiantou">
					<image :class="['itemJiantouIcon', item.isShow ? 'active' : '']" src="/static/images/jiantouUp.png"></image>
				</view>
				<view class="itemTitle">
					{{item.title}}
				</view>
				<image class="itemIcon" src="/static/images/infoIcon.png" mode="widthFix"></image>
			</view>
			<view class="itemContent" v-if="item.isShow">
				{{item.content}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [
					{
						title: 'ۋاكالەتچىلىك ۋاقتى قانچىلىك ؟',
						content: 'ۋاكالەتچىلىك ۋاقتى 2 يىل بۇلىدۇ ،يەنى سىز پۇل تۈلىگەن ۋاقىتتىن باشلىنىپ ئىككى يىل ۋاقىت توشقاندا ئاخىرلىشدۇ ،ئىككى يىلغىچە بارلىق تۈرلەرنى نورمال ئىشلىتەلەيسىز ،پايدا ئۈزلۈكسىز ئايرىلدۇ.',
						isShow: true,
					},
					{
						title: 'ۋاكالەتچىلىكنىڭ نىمىگە پايدىسى بار ؟',
						content: 'ۋاكالەتچى بولغاندىن كىيىن بىر ئايرىپىلان بىلەت سېتىۋالسىڭىز سېستىما 25 يۈەن نەق پۇل مۇكاپات ئايرىلدۇ ، پويىز بىلەت سېتىۋالسىڭىز 5 يۈەن نەق پۇل مۇكاپات ئايرىلدۇ ، قاتناش جەرىمانىسى تۈلىسڭىز 1 يۈەن مۇكاپات ئايرىلدۇ ، توك پۇلى ياكى تىلفۇن ھەققى تۈلىسڭىز 0.1يۈەندىن 3 يۈەنگىچە مۇكاپات ئايرىلدۇ ',
						isShow: false,
					},
					{
						title: 'قانداق ۋاكالەتچى بۇلىمەن ؟',
						content: 'ئالىي ئەزالىققا يۇقۇرلاش دىگەن يەردىن ۋاكالەتچى بولسىڭىز بۇلىدۇ ،ئالىي ئەزالىق ۋاكالەتچىلىك شۇ ',
						isShow: false,
					},
					{
						title: 'ۋاكالەتچى پۇلى كىيىن يانا تۇتىلامدۇ؟',
						content: 'ۋاكالەتچى پۇلى  بىرلا قېتىم ئېلىندۇ ، يەنى  ۋاكالەتچى پۇلى تۈلىگەن كۈندىن باشلاپ 2 يىل ئىچىدە قايتا ۋاكالەتچىلىك ھەققى تۈلىمىسڭىزمۇ بۇلىدۇ ',
						isShow: false,
					},
				],
			};
		},
		methods: {
			clickItem(index) {
				this.listData[index].isShow = !this.listData[index].isShow;
			}
		}
	}
</script>

<style lang="scss">
	.commonProblem {
		background-color: #fff;
		min-height: 100vh;
		.listBox {
			margin-bottom: 2rpx;
			
			.listItem {
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				height: 100rpx;
				background: #F6F6F6;
				
				&:last-child {
					border-bottom: none;
				}
				
				.itemJiantou {
					width: 35rpx;
					height: 35rpx;
					.itemJiantouIcon {
						width: 18rpx;
						height: 10rpx;
						transform: rotate(180deg);
					}
					.active {
						transform: rotate(0deg);
					}
				}
				.itemTitle {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					text-align: right;
					padding: 0 20rpx;
				}
				.itemIcon {
					width: 32rpx;
					height: 32rpx;
				}
			}
			.itemContent {
				background-color: #fff;
				padding: 30rpx 70rpx 30rpx 30rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #3FB739;
				line-height: 34rpx;
				text-align: right;
			}
		}
	}
</style>
